<template>
  <div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button
              @click="gotolink"
              round
              block
              type="info"
              native-type="submit"
            >
              登录
            </van-button>
          </div>
        </van-form>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      activeTitle: this.$route.meta.title,
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    // 跳转
    gotolink() {
      if (this.username != "abc" || this.password != "123456") {
        alert("用户名或密码输入错误");
        return;
      } else if (this.username == "abc" && this.password == "123456") {
        this.$router.push({
          path: "/layout/home",
        });
        alert("欢迎登录");
      }
    },
  },
  watch: {
    $route() {
      this.activeTitle = this.$route.meta.title; // 提取切换后路由信息对象里的title显示
    },
  },
};
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>